<template>
	<view class="container">
		<!-- 我的诚信值 -->
		<view class="my-value">
			<!-- 背景图 -->
			<image src="/static/icon1/25.png" mode="aspectFill"></image>
			<view class="main">
				<view>诚信值 （分）</view>
				<view>{{ userInfo.integrity/100 }}</view>
			</view>
		</view>
		<!-- 类目 -->
		<view class="category">
			<view :class="flag == 0 ? 'select' : ''" @tap="handleTypeChange(0)">全部记录</view>
			<view :class="flag == 1 ? 'select' : ''" @tap="handleTypeChange(1)">加分记录</view>
			<view :class="flag == 2 ? 'select' : ''" @tap="handleTypeChange(2)">减分记录</view>
		</view>
		<!-- 流水列表 -->
		<view class="honest-list">
			<view v-for="item in honestList" :key="item.id">
				<view>
					<view>{{ item.remark }}</view>
					<view>{{ item.createTime }}</view>
				</view>
				<view :class="item.amount > 0 ? 'add' : 'reduce'">
					{{ item.amount > 0 ? `+${item.amount}` : item.amount }}</view>
			</view>
		</view>
		<!-- 加载 -->
		<uni-load-more :status="hasFlag ? 'loading' : isNoMore ? 'noMore' : ''"></uni-load-more>
	</view>
</template>
<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import phoneLimite from '@/libs/function/phoneLimite.js' //判断是否有拨打电话权限
	export default {
		components: {
			uniLoadMore,
		},
		data() {
			return {
				userInfo: {
					user: {},
					params: {}
				}, //当前用户信息
				hasFlag: true, // 是否还有更多数据要加载
				flag: 0, //当前类目
				amount: -200, //
				requestObj: {
					type: 50,
					pageNum: 0,
					pageSize: 20,
				},
				honestList: [], //诚信值列表
				serviceTelephone: '', //客服电话
				isNoMore: false,
			}
		},
		methods: {
			// 刷新
			refresh() {
				this.honestList = []
				this.hasFlag = true
				this.requestObj.pageNum = 0
				this.requestObj.pageSize = 20
				this.my_flow()
			},
			// 获取诚信值
			async my_flow() {
				if (!this.hasFlag) return // 说明已经没有更多啦
				this.requestObj.pageNum = ++this.requestObj.pageNum
				let res = await this.$fetch(this.$api.my_flow, this.requestObj, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				// 整理数据
				res.rows.forEach(item => {
					item.amount = (item.amount / 100)
				})
				// 拼接
				this.honestList = [...this.honestList, ...res.rows]
				this.hasFlag = this.honestList.length < res.total
			},
			// 更改类目
			handleTypeChange(a) {
				if (this.flag === a) return
				this.flag = a
				if (this.flag == 1) {
					this.requestObj.typeIn = "51,53,56,57"
				} else if (this.flag == 2) {
					this.requestObj.typeIn = "52,54,55"
				} else {
					this.requestObj = {
						type: 50,
						pageNum: 0,
						pageSize: 20,
					}
				}
				this.refresh()
			},
			// 获取电话
			async getServiceTelephone() {
				let res = await this.$fetch(this.$api.property_list_by_type, {
					type: 1
				}, 'POST')
				// 客服电话
				uni.setStorageSync('serviceTelephone', res.data.telephone)
				this.serviceTelephone = uni.getStorageSync('serviceTelephone')
			},
		},
		onLoad() {},
		onShow() {
			this.refresh()
			this.userInfo = uni.getStorageSync('userInfo')
			this.getServiceTelephone()
		},
		onReachBottom() {
			this.isNoMore = true
			this.my_flow() //再次调用接口
		},
		onNavigationBarButtonTap() {
			uni.showModal({
				title: '提示',
				content: '是否拨打电话？',
				success: (res) => {
					if (res.confirm) {
						phoneLimite(this.serviceTelephone)
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
		}
	}
</script>
<style lang="less">
	.container {
		&>.my-value {
			position: relative;
			text-align: center;
			width: 690rpx;
			height: 280rpx;
			padding: 0 30rpx;
			background: #FFFFFF;
			box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03) inset;

			&>image {
				top: 0;
				left: 0;
				position: absolute;
				width: 750rpx;
				height: 276rpx;
			}

			&>.main {
				position: relative;
				top: 66rpx;
				z-index: 1;

				&>view:nth-child(1) {
					color: rgba(64, 33, 16, 0.70);
					margin-bottom: 20rpx;
					height: 40rpx;
				}

				&>view:nth-child(2) {
					font-size: 32px;
					height: 90rpx;
				}
			}
		}

		&>.category {
			margin-bottom: 30rpx;
			display: flex;
			justify-content: center;
			background-color: #FFFFFF;

			&>view {
				position: relative;
				height: 90rpx;
				display: flex;
				flex: 33.33%;
				justify-content: center;
				align-items: center;
				color: rgba(64, 33, 16, 0.50);

				// border: 1px solid #000000;
				// 选中样式
				&.select {
					color: #F39B19;
					;
					font-weight: bold;

					&::before {
						content: "";
						position: absolute;
						bottom: 0;
						left: 95rpx;
						width: 60rpx;
						height: 4rpx;
						background: #F39B19;
						border-radius: 1px;
					}
				}
			}
		}

		&>.honest-list {
			background-color: #FFFFFF;

			&>view {
				position: relative;
				padding: 20rpx 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&>view {
					&>view:first-child {
						height: 40rpx;
						color: #000000;
						margin-bottom: 10rpx;
					}

					&>view:last-child {
						height: 34rpx;
						font-size: 12px;
						color: #A2A2A2;
					}
				}

				&>.add {
					font-weight: bold;
					font-size: 17px;
					color: #4E9800;
				}

				&>.reduce {
					font-weight: bold;
					font-size: 17px;
					color: #C9281C;
				}

				&::before {
					content: "";
					position: absolute;
					top: 124rpx;
					width: 720rpx;
					height: 2rpx;
					background: #F2F2F2;
					border-radius: 1px;
				}
			}
		}
	}
</style>